<template>
  <div class="app-container" v-loading="loading">
    <!--<h1>设备ID</h1>-->
    <img id="barcode"/>
    <br>
    <br>
    <span>设备ID：</span><span id="foo">{{usncode}}</span><el-button data-clipboard-target="#foo" type="text" id="copyBtn" @click="copyId">复制</el-button>
  </div>
</template>

<script>
  import jsbarcode from 'jsbarcode'
  // import clipboard from 'clipboard';
    export default {
        name: "deviceID",
      data:function(){
          return{
            loading:false,
            usncode:''
          }
      },
      methods:{
        copyId:function(){
          var _this=this
          var clipboard = new this.clipboard('#copyBtn');
          //成功回调
          clipboard.on('success', function(e) {
            console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);
            _this.tips('复制成功','success')
            e.clearSelection();
            clipboard.destroy()
          });
          //失败回调
          clipboard.on('error', function(e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
            _this.tips('复制失败，请手动复制','error')
            e.clearSelection();
            clipboard.destroy()
          });

        },
        getusncode :function () {
          var _this=this
          _this.loading=true
          _this.postAjax({
            method:'getusncode',
            params:{}
          }).then(function (res) {
            console.log(res);
            if(res.result==0){
              _this.usncode=res.params.usncode
              // 生成条形码
              jsbarcode(
                '#barcode',
                _this.usncode,
                {
                  displayValue: true // 是否在条形码下方显示文字
                }
              )
              // _this.tips('保存成功','success')
              // var data=res.params
              // // debugger
              // _this.form.ip=data.ip
              // _this.form.gateway=data.gateway
              // _this.form.mask=data.mask
              // _this.form.dns1=data.dns1
              // _this.form.dns2=data.dns2
            }else {
              _this.tips(res.errorInfo.detail,'error')
            }
          }).catch(function (err) {
            console.log(err);
          }).finally(function (fn) {
            _this.loading=false
            console.log(fn);
          })
        }
      },
      mounted:function () {
          this.getusncode()

      }
    }
</script>

<style scoped>
#copyBtn{
  margin-left: 20px;
}
#copyBtn:hover{
  text-decoration: underline;
}
</style>
